<html>
 <head>
  <style type="text/css">
    .bar {
       color: white;
       margin-left:8px;
       font-family: Arial, sans-serif;
       font-size: 14px;
       font-style: normal;
       font-variant: normal;
       font-weight: normal;
    }
  </style>

  <link rel="stylesheet" type="text/css" href="/core/foam.css" />
  <script language="javascript" src="../core/bootFOAM.js"></script>
  <script language="javascript" src="../UML.js"></script>
  <script language="javascript" src="UML.js"></script>
  <title>FOAM Test</title>
 </head>
 <body>
  <script language="javascript">
    var canvas = Canvas.create({width: 2000, height: 2000, background:'white'});
    canvas.write(document);
    var ctx = canvas.element().getContext('2d');
    var mouse   = Mouse.create();
    mouse.connect(canvas.element());
    Events.dynamic(function() { console.log(mouse.x, mouse.y); });

//    var ic = '#f3fff3';
//    var oc = '#e8e8e8';
//    var cc = '#f3f3ff';

    var ic = '#f3fff3';
    var oc = '#e8e8e8';
    var cc = '#fafaff';


    model('Client',      oc, 2.5, 0, null, 'getA()/setA()');
    model('Interface',   ic, 5, 0);
    model('Mediator',    cc, 2.5, 1, 'Client');
    model('MVC',         cc, 2.5, 5);
    model('Strategy',    '#fdd',   5, 1, 'Interface');
    model('Strategy 2',  cc,   6, 1, 'Interface');
    model('Strategy 3',  cc,   7, 1, 'Interface');
    model('Strategy n',  cc,   9, 1, 'Interface');
    model('Adapter',     cc, 0.5, 3, 'Strategy');
    model('Bridge',      cc, 1.5, 3, 'Strategy');
    model('Observable',  cc, 2.5, 3, 'Strategy', 'addListener()');
    model('Model',       cc, 2, 4, 'Observable');
    model('View',        cc, 3, 4, 'Observable');
    model('Observer',    cc, 3.5, 3, 'Strategy', 'notify()');
    model('Proxy',       cc, 5, 3, 'Strategy', 'getA()/setA()');
    model('Composite',   cc, 6, 3, 'Strategy', 'children()');
    model('Command',     cc, 7, 3, 'Strategy', 'do()');
    model('Factory',     cc, 8, 3, 'Strategy', 'create()');
    model('NullObject',  cc, 9, 3, 'Strategy', 'f() {/   NOOP/}');
    model('Flyweight',   cc, 10, 3, 'Strategy', 'f(obj,...)');
    model('Iterator',    cc, 11, 3, 'Strategy', 'hasNext()/next()');
    model('State',       cc, 12, 3, 'Strategy', 'nextState()');
    model('Other',       oc, 0.5, 4);
    model('Decorator',   cc, 5, 4, 'Proxy');
    model('Interpreter', cc, 6.5, 4, 'Composite/Command');
    model('A',           oc, 10, 4);
    model('Chain Of R.', cc, 5, 5, 'Decorator');
    model('ByClass',     cc, 6, 5, 'Factory');
    model('Builder',     cc, 7, 5, 'Factory', 'configA()/configB()/...');
    model('Trader',      cc, 8, 5, 'Factory');
    model('Singleton',   cc, 9, 5, 'Factory', 'instance()');
    model('Prototype',  cc, 10, 5, 'Factory');

    model('Interface 2',  ic, 0.5, 0.2);
    model('Interface 3',  ic, 0.5, 1);
    model('Interface n',  ic, 0.5, 1.8);

    label(890, 240, '...');
    label(90, 305, '...');
    label(420, 40, 'uses');
    label(1005, 760, 'creates');
    label(1205, 870, 'clones');
    label(610, 50, '*');
    label(393, 583, '*');
    label(1300, 1050, 'Kevin Greer  2013');

    uses('Observable', 'Observer');
    uses('Client', 'Interface');
    ms.Mediator.y -= 0.1; uses('Mediator', 'Interface 2');
    ms.Mediator.y += 0.1; uses('Mediator', 'Interface 3');
    ms.Mediator.y += 0.1; uses('Mediator', 'Interface n');
    uses('Factory', 'A');
    uses('Bridge', 'Other');
    uses('Adapter', 'Other', 0, 0);
    uses('Proxy', 'Interface', 0, 0);
    uses('Composite', 'Interface');
    uses('Prototype', 'A', 1, 1);
//    uses('MVC', 'Model', 0, 0);
//    uses('MVC', 'View', 1, 1);

    line(325, 900,  325, 880,  5, 880,  5, 470,  325, 470,  325, 286); solidArrow(325, 286);
    line(367, 950,  445, 950,   445, 770,  425, 770); arrow(425, 770, -1);
    line(287, 950,  210, 950,   210, 770,  230, 770); arrow(230, 770, 1);
  </script>

 </body>
</html>
